<template>
    <div class="forgotPassword">
        <div class="moduleHead">
            <span @click="routerBack" class="back"></span>
            <span> {{language.forgotPassword_title}} </span>
        </div>
        <div class="promptTip"></div>
        <div class="body">
            <div v-if="showSendSuccessful">
                <div class="body_tip">
                    <h3 class="body_tip_head">{{language.forgotPassword_sendOk_tipsHead}}</h3>
                    <p class="body_tip_content" v-html="language.forgotPassword_sendOk_tips"></p>
                </div>
            </div>
            <div v-else>
                <p class="des"> {{language.forgotPassword_des}} </p>
                <div v-bind:class="email.length > 0 ? 'signup_item hasValue' : 'signup_item'">
                    <input spellcheck="false" autocapitalize="off" autocorrect="off" autocomplete="off" name="email" id="email" type="text" class="form_input email_input" @focus="focusInput" @blur="blurInput" @input="updateEmail" :value="email" v-validate="'required|usernameORemail|min'" />
                    <label for="email" :class="{'validate-error-color': hasValidateError('email')}">{{emailLable}}</label>
                    <span v-show="closeEmail" @click="clearEmail" class="cleanIco"></span>
                </div>
                <button type="button" class="btn btn-yellow btn-forgetpw" :class="btnClass" @click.prevent.stop="sendEmail">
                    <loading :props="{show:loading,type:'btn'}"></loading>
                    {{language.unify_send}}
                </button>
                <div v-show="!hideSignin" class="signin main_color">
                    <router-link :to="{ name: 'login' } ">
                        {{language.forgotPassword_signIn}}
                    </router-link>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import validationMixin from '../plugins/my-validate'
import * as API from '../api'
import loading from './Loading'

export default {

    name: 'forgotPassword',

    components: {
        loading,
    },

    mixins: [validationMixin],

    data: function() {
        return {
            email: '',
            closeEmail: false,
            loading: false,
            sendOK: false,
            emailLable: '',
            hideSignin: false,
            showSendSuccessful: false,
        }
    },

    created() {
        this.emailLable = this.language.forgotPassword_emailLabel;
        this.defaultData = _.clone(this.$data);
    },

    activated() {
        Object.assign(this.$data,this.defaultData);
        if (this.$route.query.hideSignIn == 'true') {
            this.hideSignin = true;
        } else {
            this.hideSignin = false;
        }
    },

    computed: {
        btnClass: function() {
            var activeClass;
            if (this.sendOK) {
                activeClass = 'btnOK'
            } else {
                activeClass = 'btnFail'
            }
            return activeClass ;
        }
    },

    methods: {
        focusInput(e) {
            this.setShowError(false);
        },

        blurInput(e) {
            let name = e.target.name,
                value = e.target.value;
            if (value == '') {
                this.changeCacheFields(name, {
                    errorCode: 0,
                    errormsg: '',
                });
            }
            this.emailLable = this.hasValidateError(name) ? this.getValidateError(name) : this.language.forgotPassword_emailLabel;
        },

        setShowError: function(val) {
            this.changeField('email', 'showError', val);
        },

        routerBack() {
            this.$router.go(-1);
        },

        updateEmail: function(e) {
            let name = e.target.name;
            if (e.target.value.length > 0) {
                this.closeEmail = true;
            } else {
                this.closeEmail = false;
            }
            this.email = e.target.value;
            this.updateBtn(name);
        },

        updateBtn(name) {
            if (this.checkOneAll(name)) {
                this.sendOK = true;
            } else {
                this.sendOK = false;
            }
            this.emailLable = this.hasValidateError(name) ? this.getValidateError(name) : this.language.forgotPassword_emailLabel;
        },

        clearEmail: function() {
            this.email = '';
            this.closeEmail = false;
            this.clearElNameValue('email');
        },

        sendEmail: function() {
            var tthis = this;
            this.setShowError(true);
            if(this.checkAll() && !tthis.loading){
                tthis.loading = true;
                if (this.checkOne('email')) {
                    API.forget_password({
                        data: {
                            email: this.email,
                        },
                        success: (response) => {
                            tthis.sendSuccessful();
                        },
                        complete: function() {
                            tthis.loading = false;
                        }
                    });
                }
            }
        },

        sendSuccessful: function() {
            this.loading = true;
            this.showSendSuccessful = true;
        },
    }
}

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.forgotPassword {
    padding-top: 44px;
}

.forgotPassword span {
    margin: 0;
    padding: 0;
    border: none;
    outline: 0;
    vertical-align: baseline;
}

.forgotPassword .cleanIco {
    position: absolute;
    right: 6px;
    top: 9.5px;
    width: 25px;
    height: 25px;
    cursor: pointer;
    background: url(./../assets/icoClose.png) center no-repeat;
    background-size: 20px auto;
}

.forgotPassword .body {
    padding: 20px 10px 10px;
    color: #999;
}

.forgotPassword .des {
    font-size: 14px;
    font-family: helvetica;
    text-align: left;
}

.forgotPassword .signup_item {
    margin: 20px 0;
    position: relative;
}

.forgotPassword .signup_item label {
    position: absolute;
    left: 0;
    top: 10px;
    height: 26px;
    width: 100%;
    line-height: 26px;
    z-index: 1;
    color: #757575;
    font-size: 14px;
    -webkit-transition: all .2s;
    transition: all .2s;
}

.forgotPassword .form_input {
    border: 0;
    border-bottom: 1px solid #ccc;
    width: 100%;
    color: #333;
    height: 46px;
    line-height: 20px;
    padding: 15px 0 0 0;
    box-sizing: border-box;
    font-size: 14px;
    font-family: Helvetica, Tahoma, Arial, 华文细黑, 微软雅黑, sans-serif;
    position: relative;
    border-radius: 0;
}

.forgotPassword .hasValue label,
.forgotPassword .hasValue .form_input:focus~label,
.forgotPassword .signup_item .form_input:focus~label {
    transform: scale(.8, .8) translate(-12.5%, -15px);
    -moz-transform: scale(.8, .8) translate(-12.5%, -15px);
    -webkit-transform: scale(.8, .8) translate(-12.5%, -15px);
    color: #222;
}

.forgotPassword .btn-forgetpw {}

.forgotPassword .signin {
    text-align: center;
    padding: 20px 0 0 0;
    font-weight: bold;
}

.forgotPassword .err {
    font-size: 13px;
    padding-left: 10px;
    margin-top: -20px;
    margin-bottom: 10px;
    clear: both;
    color: red;
}

.forgotPassword .body_tip {
    margin: 0 auto 0;
    padding: 4.5em .65em 2.5em;
    width: auto;
    text-align: center;
}

.forgotPassword .body_tip_head {
    color: #333;
    font-size: 13px;
    text-align: center;
    padding-bottom: 14px;
    font-weight: normal;
    margin-top: -4px;
    max-width: 320px;
    margin: 0 auto;
}

.forgotPassword .body_tip_content {
    font-size: 13px;
    color: #999999;
    line-height: 18px;
    text-align: left;
    max-width: 320px;
    margin: 0 auto;
}

.forgotPassword .btnFail {
    opacity: .6;
}

.forgotPassword .btnOK {
}

</style>
